<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			用户详情
		</view>
		<view class="base-box" v-if="!loading" >
			<view class="base">
				<u-table class="u-table-basic"  align="left">
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							基础信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							姓名
						</u-td>
						<u-td class="u-table-td "  >
							{{data.name}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr " >
						<u-td class="u-table-td u-table-tr bold" width="104px" >
							手机号码
						</u-td>
						<u-td class="u-table-td"  >
							{{data.mobile}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户性别
						</u-td>
						<u-td class="u-table-td"  >
							{{data.sex}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户生日
						</u-td>
						<u-td class="u-table-td"  >
							{{initBirthdy(data.birthday)}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							自我介绍
						</u-td>
						<u-td class="u-table-td"  >
							{{data.intro}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							证件号码
						</u-td>
						<u-td class="u-table-td"  >
							{{initIdCard(data.id_card.card_id) }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							证件住址
						</u-td>
						<u-td class="u-table-td"  >
							{{ data.id_card.address }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							证件民族
						</u-td>
						<u-td class="u-table-td"  >
							{{ data.id_card.nation }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							证件失效日期
						</u-td>
						<u-td class="u-table-td "  >
							{{initBirthdy( data.id_card.expiring_date )}}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							证件签发机关
						</u-td>
						<u-td class="u-table-td"  >
							{{  data.id_card.organ }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							服务类型标题
						</u-td>
						<u-td class="u-table-td"  >
							<view>
								<u-tag v-for="item in data.classify" :text="item.title" mode="plain" style="margin-right: 5px;" /> 
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							所属店铺
						</u-td>
						<u-td class="u-table-td"  >
							<view>
								{{data.shop.title}}
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户所在位置
						</u-td>
						<u-td class="u-table-td"  >
							{{(data.location.title) }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户余额
						</u-td>
						<u-td class="u-table-td"  >
							{{(data.money) }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户坐标
						</u-td>
						<u-td class="u-table-td"  >
							{{ data.coordinate }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							审核状态
						</u-td>
						<u-td class="u-table-td"  >
							{{(data.examine_status.text) }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							已接单数量
						</u-td>
						<u-td class="u-table-td"  >
							{{(data.orders || 0) }}单
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							推荐人数量
						</u-td>
						<u-td class="u-table-td"  >
							{{(data.sell) }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							最新评价
						</u-td>
						<u-td class="u-table-td"  >
							{{ (data.comment?data.comment.text :'暂无评价') }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							账户状态
						</u-td>
						<u-td class="u-table-td"  >
							{{  data.status.text  }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							是否确认条款
						</u-td>
						<u-td class="u-table-td"  >
							{{  data.is_confirm_term ?'已确认':'未确认'  }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							身份
						</u-td>
						<u-td class="u-table-td"  >
							{{  data.is_technician ?'技师':'用户'  }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							评分
						</u-td>
						<u-td class="u-table-td"  >
							{{  data.score?(data.score / 10).toFixed(1):(5).toFixed(1) }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							资料填写进度
						</u-td>
						<u-td class="u-table-td"  >
							{{onStepValue(data.step )  }}
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							创建时间
						</u-td>
						<u-td class="u-table-td"  >
							{{  data.create_date?data.create_date.date :''  }}
						</u-td>
					</u-tr>
				</u-table>
			</view>
			<view class="base">
				<u-table class="u-table-basic"  align="left" >
					<u-tr style="" >
						<u-th class="u-table-th bold" align="left" >
							图片信息
						</u-th>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							用户头像
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="100px" height="100px" :src="data.head_image"
									@click="eventImage(data.head_image)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							身份证正面
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="150px" height="100px" :src="data.id_card.card_zheng"
									@click="eventImage(data.id_card.card_zheng)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							身份证反面
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout">
								<u-image width="150px" height="100px" :src="data.id_card.card_fan"
									@click="eventImage(data.id_card.card_fan)"></u-image>
							</view>
						</u-td>
					</u-tr>
					<u-tr  class="u-table-tr" >
						<u-td class="u-table-td bold" width="104px" >
							技师照片
						</u-td>
						<u-td class="u-table-td"  >
							<view class="flex-layout" style="width:250px;">
								<u-swiper  height="400" @click="eventImage(data.photo)" :list="data.photo"></u-swiper>
							</view>
						</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		<view class="base-box"  >
			<u-table class="u-table-senior" v-if="addressData.length != 0" >
				<u-tr style="margin-right:15px;" >
					<u-th class="u-table-th"  width="100px">地址姓名</u-th>
					<u-th class="u-table-th" width="130px">手机号码</u-th>
					<u-th class="u-table-th"  width="288px">地址详情</u-th>
					<u-th class="u-table-th" width="288px">详细地址</u-th>
					<u-th class="u-table-th">地址坐标</u-th>
					<u-th  width="80px" >是否默认</u-th>
					<u-th  width="80px" >是否酒店</u-th>
				</u-tr>
				<view class="u-table-senior-body" style="height:50vh" >
					<u-tr  v-for="(item,index) in addressData" :key="index"
						class="u-table-tr"
					>
						<u-td class="u-table-td"  width="100px">{{item.name}}</u-td>
						<u-td class="u-table-td" width="130px" >
							{{item.mobile}}
						</u-td>
						<u-td class="u-table-td" width="288px">
							{{item.address_detail}}
						</u-td>
						<u-td class="u-table-td" width="288px">
							{{item.address_name}}-{{item.address}}
						</u-td>
						<u-td class="u-table-td">
							{{item.location.coordinates}}
						</u-td>
						<u-td class="u-table-td " width="80px">
							{{item.is_default ? '是':'否'}}
						</u-td>
						<u-td class="u-table-td " width="80px">
							{{item.is_hotel ? '是':'否'}}
						</u-td>
					</u-tr>
				</view>
				<view class="u-table-senior-pagination">
					<uni-pagination title="标题文字" total="20"></uni-pagination>
				</view>
			</u-table>
			
		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import {onStepValue , form} from "/common/js_file/user-list.js" ;
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:true,
				uid:'',
				data:{},
				addressData:[],// 地址信息
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
				this.getAddress();
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				let field = " head_image,name,sex,mobile,birthday,sell,score,orders,intro,coordinate,step,photo,id_card,shop,create_date,classify,location,order_taking,is_technician,is_confirm_term,money,coordinate,examine_status,status ";
				global.getOne('userinfo',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					this.data.id_card  = data.id_card ? data.id_card :form.id_card ;
					this.data.shop  = data.shop ? data.shop :form.shop ;
					this.data.comment  = data.comment ? data.comment :form.comment ;
					this.data.examine_status = data.examine_status?data.examine_status:{"text": '审核通过',"value": 1,"datetime": Date.now()};
					this.data.status = data.status?data.status:{"value": 0,"text": '正常'};
					this.data.order_taking = data.order_taking?data.order_taking:{"value": 0,"time":''};
					this.data.classify = data.classify ?data.classify :[]; 
					this.data.coordinate = data.coordinate?data.coordinate.coordinates?data.coordinate.coordinates.join(','):'':'';
					this.loading = false ;
				})
			},
			// 获取地址信息
			getAddress(){
				let field = " name,mobile,address_name,address_detail,location,address,is_default,is_hotel,user_id ";
				global.getList('address',{user_id:this.uid},field).then(res => {
					let data = res.data;
					this.addressData = data;
				})
			},
			initIdCard(idCard){
				return Util.formatBankCardNumber(`${idCard}`);
			},
			initBirthdy(birthdy){
				if( !birthdy ) return '' ;
				const firstFour = birthdy.substring(0, 4); // 截取前四位
				const remaining = birthdy.substring(4); // 截取剩余部分
				// 每两位添加空格
				const formatted = remaining.replace(/(.{2})/g, '-\$1 ').trim();
				return `${firstFour} ${formatted}`;
			},
			onStepValue(step){
				return onStepValue(step);
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
		}
	}
</script>

<style>
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
		margin-bottom:10px;
	}
	.base{
		width: 50%;
	}
</style>
